---
title: Use "as" prop
menu: Advanced
order: 20
---

# The "as" property

Sometimes you may want to use a component but the resulting HTML tag is not the good one. Or you want to use a `Button` with another component like [the `Link` from React Router](https://reacttraining.com/react-router/web/api/Link).

## Usage

Every components accepts a `forwardedAs` property, it defines the underlying component used in each component.

An example of an `Alert` that uses `span` as a component.

```jsx live noInline
import React from 'react'
import { Alert } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Alert forwardedAs="span" variant="primary">
      A span alert
    </Alert>
  )
}

render(<Example />)
```

> The `as` property is reserved to `styled-components`, use `forwardedAs` to replace the underlying component.
